/**
 * Created with  SublimeText
 * @Author:      Lyle
 * @DateTime:    2016-12-06 22:33:55
 * @Description: 
 */
import React, { Component, PropTypes } from 'react'

class Home extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.setIntervalTime();
    }

    componentWillUnmount() {
        this.props.clearIntervalTime();
    }

    render() {
        const { login, loginState, handleChange } = this.props;
        return (
            <div id='home' className='module'>
                <div className='content'>
                    <div className='title'>
                        Rock - Admin
                    </div>
                    <div className='form'>
                        <div className='item'>
                            <span>
                                <input spellCheck="false" 
                                       autoCapitalize="off" 
                                       autoCorrect="off" 
                                       autoComplete="off" 
                                       ref='userName' 
                                       name="userName" 
                                       type="text" 
                                       placeholder="Username"  
                                       onChange={handleChange.bind(this,'username')}  
                                       value={loginState.username} 
                                />
                            </span>
                        </div> 
                        <div className='item'>
                            <span>
                                <input spellCheck="false" 
                                     autoCapitalize="off" 
                                     autoCorrect="off" 
                                     autoComplete="off" 
                                     ref='passWord' 
                                     name="passWord" 
                                     type="password" 
                                     placeholder="Password" 
                                     onChange={handleChange.bind(this,'password')} 
                                     value={loginState.password} 
                                />
                            </span>
                        </div>
                        <div className='remember'>
                            <label className='checkbox'>
                                <input type='checkbox' value='remember-me' /> Remember me
                                <span className='pull-right'>
                                    <a href=""> Forgot Password?</a>
                                </span>
                            </label>
                        </div>
                        <div className='btnLogin'>
                            <button type="button" className="btn" onClick={() => login()}> LOGIN </button>
                        </div>

                        <div className='error'>
                            {loginState.error}
                        </div>
                    </div>
                </div>
                <div className="footer">
                    <div>
                        <div>
                            Rock Admin Management System copy @ v0.1 by Lyle github <br/>
                            Email:Lylechen2014@gmail.com {loginState.time}
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}

Home.propTypes = {
    login: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    loginState: PropTypes.object.isRequired
}

export default Home
